<template>
  <div>
    <!-- Title -->
    <div>
      <TitleCompound :title="title" :description="description" />
    </div>

    <!-- Content -->
    <div>
      <el-table :data="[getNews()]" style="width: 100%">
        <el-table-column prop="id" label="ID" width="180" />
        <el-table-column prop="title" label="Title" width="180" />
        <el-table-column prop="author" label="Author" />
        <el-table-column prop="publishedDate" label="PublishedDate" />
        <el-table-column prop="content" label="Content" />
      </el-table>
    </div>
  </div>
</template>
<script lang="ts" setup>
import TitleCompound from '@/components/TitleCompound.vue';
import { useNewsStore } from '@/stores/News';

import { useRoute } from 'vue-router';

const title = "Router Detail-Props"

const description = `
在<b>DetailPropsView.vue</b>可以这样使用
<ul>
<li>使用<b class='highlight'>const id = route.params.id</b>来接收id的值。多个值，也可以使用<b class='highlight'>const {id, title, content} = route.params</b>来解构</li>
<li>或者直接简化，使用<b class='highlight'>const { id } = defineProps(['id'])</b>来接收id的值，当然多个值也可以这样：<b class='highlight'>const { id, title, content } = defineProps(['id', 'title', 'content'])</b></li>
<ul>
`

const { id } = defineProps(['id'])

const route = useRoute();
console.log(">>>> route   ", route)
const newsStore = useNewsStore();

function getNews() {
  // const id = route.params.id as string;
  const news = newsStore.getNewsById(id);
  // console.log(">>>>> id: ", id, " news: ", news)
  return news
}


</script>
<style lang="scss" scoped></style>
